<template>
  <div class="identity-carousel">
    <el-carousel
        :interval="5000"
        height="350px"
        indicator-position="outside"
        arrow="hover"
    >
      <el-carousel-item v-for="(image, index) in images" :key="index">
        <div class="carousel-item">
          <div class="image-placeholder" v-if="!image">
            <i class="el-icon-picture-outline"></i>
            <p>身份功能图片</p>
          </div>
          <img v-else :src="image" :alt="`身份图片 ${index+1}`" class="carousel-image" />
          <div class="carousel-caption">
            <h4>{{ titles[index] || `功能展示 ${index+1}` }}</h4>
            <p>{{ captions[index] || '了解更多功能特点' }}</p>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
defineProps({
  images: Array,
  titles: Array,
  captions: Array
})
</script>

<style scoped>
.identity-carousel {
  margin: 2rem 0;
}

.carousel-item {
  position: relative;
  height: 100%;
  width: 100%;
}

.image-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #f5f7fa;
  border-radius: 8px;
  color: #909399;
}

.image-placeholder i {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  padding: 1.5rem;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.carousel-caption h4 {
  margin: 0 0 0.5rem;
  font-size: 1.3rem;
}

.carousel-caption p {
  margin: 0;
  font-size: 0.95rem;
  opacity: 0.9;
}
</style>
<!--&lt;!&ndash; IdentityCarousel.vue &ndash;&gt;-->
<!--<template>-->
<!--  <el-carousel-->
<!--      :interval="5000"-->
<!--      height="300px"-->
<!--      indicator-position="outside"-->
<!--      arrow="always"-->
<!--  >-->
<!--    <el-carousel-item v-for="(image, index) in images" :key="index">-->
<!--      <div class="carousel-item">-->
<!--        <img :src="image" :alt="`身份图片 ${index+1}`" class="carousel-image" />-->
<!--        <div class="carousel-caption">-->
<!--          <h4>{{ titles[index] }}</h4>-->
<!--          <p>{{ captions[index] }}</p>-->
<!--        </div>-->
<!--      </div>-->
<!--    </el-carousel-item>-->
<!--  </el-carousel>-->
<!--</template>-->

<!--<script setup>-->
<!--defineProps({-->
<!--  images: Array,-->
<!--  titles: Array,-->
<!--  captions: Array-->
<!--})-->
<!--</script>-->

<!--<style scoped>-->
<!--.carousel-item {-->
<!--  position: relative;-->
<!--  height: 100%;-->
<!--  width: 100%;-->
<!--}-->

<!--.carousel-image {-->
<!--  width: 100%;-->
<!--  height: 100%;-->
<!--  object-fit: cover;-->
<!--  border-radius: 8px;-->
<!--}-->

<!--.carousel-caption {-->
<!--  position: absolute;-->
<!--  bottom: 0;-->
<!--  left: 0;-->
<!--  right: 0;-->
<!--  background: rgba(0, 0, 0, 0.6);-->
<!--  color: white;-->
<!--  padding: 15px;-->
<!--  border-bottom-left-radius: 8px;-->
<!--  border-bottom-right-radius: 8px;-->
<!--}-->

<!--.carousel-caption h4 {-->
<!--  margin: 0 0 5px 0;-->
<!--  font-size: 18px;-->
<!--}-->

<!--.carousel-caption p {-->
<!--  margin: 0;-->
<!--  font-size: 14px;-->
<!--}-->
<!--</style>-->